<script setup lang="ts">

</script>

<template>
  <el-popover
      :width="300"
      trigger="click"
      popper-style="box-shadow: rgb(14 18 22 / 35%) 0px 10px 38px -10px, rgb(14 18 22 / 20%) 0px 10px 20px -15px; padding: 20px;"
  >
    <template #reference>
      <ElIconComment class="w-10 h-10 text-[var(--el-color-primary)] myComment"></ElIconComment>
    </template>
    <template #default>
      <div>
        <div class="title">客服1: QQ:1147642768</div>
        <div class="w-32 h-32 mx-auto">
          <div class="w-[100px] ">
            <img src="~/assets/imgs/qq1.jpg"  alt="客服1">
          </div>
        </div>
      </div>
      <div>
        <div class="title">客服2: QQ:2229514815</div>
        <div class="w-32 h-32 mx-auto">
          <div class="w-[100px]">
            <img src="~/assets/imgs/qq2.jpg" alt="客服2">
          </div>
        </div>
      </div>
    </template>
  </el-popover>
</template>

<style scoped lang="scss">
.myComment{
  position: fixed;
  right: 10px;
  bottom: 200px;
  z-index: 1;
}
.title{
  padding: 10px 0;
}
</style>